<div>
  <h3 class="first">Single Column</h3>
  <p-dataTable [value]="cars1" [sortField]="sortF" [sortOrder]="sortO" (onSort)="changeSort($event)">
    <p-column field="vin" header="Vin" [sortable]="true"></p-column>
    <p-column field="year" header="Year" [sortable]="true"></p-column>
    <p-column field="brand" header="Brand" [sortable]="true"></p-column>
    <p-column field="color" header="Color" [sortable]="true"></p-column>
    <p-footer>
      <button type="button" label="Sort by Year" (click)="changeSort($event)" pButton></button>
    </p-footer>
  </p-dataTable>

  <h3>Multiple Columns</h3>
  <p-dataTable [value]="cars2" sortMode="multiple">
    <p-column field="vin" header="Vin" [sortable]="true"></p-column>
    <p-column field="year" header="Year" [sortable]="true"></p-column>
    <p-column field="brand" header="Brand" [sortable]="true"></p-column>
    <p-column field="color" header="Color" [sortable]="true"></p-column>
  </p-dataTable>
</div>
